<template>
  <div class="zy-content">
    <back-level :go-page="close"></back-level>
    <Form ref="pdebugForm" :model="formItem" :label-width="200">
      <Card :title="$t('preliminary.BasicInformation')" class="detail-content-layout">
        <div class="basic-info">
          <div class="basic-info-body">
            <Row style="border-top: 1px solid #eee;">
              <Col span="8">
                <FormItem :label="`${$t('ledger.AssetNo')}:`">
                  <div class="basic-info-body-item">{{ formItem.assetsNo }}</div>
                </FormItem>
              </Col>
              <Col span="8">
                <FormItem :label="`${$t('preliminary.ContractNumber')}:`">
                  <div class="basic-info-body-item">{{ formItem.contractNo }}</div>
                </FormItem>
              </Col>
              <Col span="8">
                <FormItem :label="`${$t('maintenance.EquipmentName')}:`">
                  <div class="basic-info-body-item">
                    <!--                                    <Tooltip max-width="500" v-if="formItem.deviceName">-->
                    <!--                                        <div class="over-wrapper">{{ formItem.deviceName }}</div>-->
                    <!--                                        <div slot="content">-->
                    <!--                                            <p>{{ formItem.deviceName }}</p>-->
                    <!--                                        </div>-->
                    <!--                                    </Tooltip>-->
                    {{ formItem.deviceName }}
                  </div>
                </FormItem>
              </Col>

            </Row>
            <Row style="border-top: 1px solid #eee; border-bottom: 1px solid #eee">
              <Col span="8">
                <FormItem :label="`${$t('equipCheck.Model')}:`">
                  <div class="basic-info-body-item">{{ formItem.specification }}</div>
                </FormItem>
              </Col>
              <Col span="8">
                <FormItem :label="`${$t('preliminary.Entity')}:`">
                  <div class="basic-info-body-item">{{ formItem.belongCompanyName }}</div>
                </FormItem>
              </Col>
              <Col span="8">
                <FormItem :label="`${$t('preliminary.Vendor')}:`">
                  <div class="basic-info-body-item">{{ formItem.supplier }}</div>
                </FormItem>
              </Col>
            </Row>
          </div>

        </div>
      </Card>
      <Card :title="$t('preliminary.InstallationPlan')" class="detail-content-layout mt16">
        <div class="basic-info">
          <div class="basic-info-body">
            <div class="tableContent">
              <Table
                  :columns="columns"
                  :data="formItem.dmsInstallPlanList"
              >
                <template slot-scope="{ row, index }" slot="action">
                                <span class="operationBtn"
                                      @click="handleDeletePlan(index)">{{ $t('common.Delete') }}</span>
                </template>
              </Table>
            </div>
          </div>
        </div>
      </Card>
      <Card :title="$t('preliminary.InstallationDebugging')" class="detail-content-layout mt16">
        <div class="basic-info">
          <div class="basic-info-body">
            <Table :columns="debugColumns" :data="debugDataSource">

            </Table>
          </div>
        </div>
      </Card>
      <Card :title="$t('ledger.attachmentinformation')" class="detail-content-layout mt16">
        <div class="basic-info">
          <div class="basic-info-body">
            <div class="file-list">
                        <span v-for="(item, index) in fjxxFile" :key="index">
                             <Tag class="item-src"
                                  type="border"
                                  color="blue"
                                  @click.native="handlePreview(item)">
                                {{ item.fileName }}
                            </Tag>
                        </span>
            </div>
          </div>
        </div>
      </Card>
    </Form>
  </div>
</template>

<script>
export default {
    name: "detailPdebuggingModal",
    data() {
        return {
            result: '',
            sendInfoVisible: false,
            formItem: {},
            columns: [
                {
                    title: `${this.$t('preliminary.No')}`,
                    key: 'id',
                    align: 'center',
                    // slot: 'content',
                    // minWidth: 120
                },
                {
                    title: `${this.$t('preliminary.Item')}`,
                    key: 'content',
                    align: 'center',
                    // slot: 'content',
                    // minWidth: 120
                },
                {
                    title: `${this.$t('preliminary.PlannedStartTime')}`,
                    key: 'planStartDate',
                    align: 'center',
                    // slot: 'planStartDate',
                    // minWidth: 120
                },
                {
                    title: `${this.$t('preliminary.PlannedFinishTime')}`,
                    key: 'planFinishDate',
                    align: 'center',
                    // slot: 'planFinishDate',
                    // minWidth: 120
                },
                {
                    title: `${this.$t('preliminary.ContactCompany')}`,
                    key: 'installCompanyName',
                    align: 'center',
                    // slot: 'installCompanyName',
                    // minWidth: 120,
                },

                {
                    title: `${this.$t('preliminary.ContactPerson')}`,
                    key: 'contacts',
                    align: 'center',
                    // slot: 'contacts',
                    // minWidth: 120
                },
                {
                    title: `${this.$t('preliminary.ContactPhone')}`,
                    key: 'phone',
                    align: 'center',
                    // slot: 'phone',
                    // minWidth: 120
                },
                {
                    title: `${this.$t('common.remarks')}`,
                    key: 'notes',
                    align: 'center',
                    // slot: 'phone',
                    // minWidth: 120
                },

                // {
                //     title: '实际完成日期',
                //     key: 'finishDate',
                //     align: 'center',
                //     // slot: 'finishDate',
                //     // minWidth: 120
                // },
                // {
                //     title: `${ this.$t('common.operation') }`,
                //     key: 'action',
                //     align: 'center',
                //     slot: 'action'
                // }
            ],
            data: [],
            debugColumns: [
                {
                    title: `${this.$t('preliminary.TheAnnTime')}`,
                    key: 'createTime',
                    align: 'center',
                },
                {
                    title: `${this.$t('preliminary.TheAnnBy')}`,
                    key: 'realname',
                    align: 'center',
                },
                {
                    title: `${this.$t('preliminary.TheAnnResult')}`,
                    key: 'installResultText',
                    align: 'center',
                },
                {
                    title: `${this.$t('preliminary.TheAnnDesc')}`,
                    key: 'installDesc',
                    align: 'center',
                },
                // {
                //     title: '安调资料',
                //     key: 'atFile',
                //     align: 'center',
                //     slot: 'ysjl'
                // }
            ],
            debugDataSource: [],
            fjxxFile: []
        }
    },
    created() {
        this.result = this.$route.query.installStatus
        this.sendInfoVisible = true
        this.getDetail(this.$route.query.deviceMId)
    },
    methods: {
        close() {
            this.$router.go(-1)
        },
        //获取详情信息
        getDetail(deviceMId) {
            this.axios({
                method: 'post',
                url: '/dms/dmsInstallPlan/get',
                params: {
                    deviceMId: deviceMId
                }
            }).then(res => {
                
                if (res.code == 200) {
                    this.fjxxFile = []
                    this.$nextTick(() => {
                        this.formItem = res.data
                        this.debugDataSource = res.data.installList
                        res.data.installList.forEach(val => {
                            if (val.atFile && val.atFile.length) {
                                for (let list of val.atFile) {
                                    this.fjxxFile.push(list)
                                }
                            }
                        })
                        this.formItem.installMaterialStatus = res.data.install_material_status
                    })
                }
            })
        },
        //文件预览
        handlePreview(item) {
            if (item) {
                window.open(this.util.filePathToUrl(item.filePath));
            }
        },
        handleVisibleChange() {
        }
    }
}
</script>

<style scoped lang="scss">
.basic-info {
    .basic-info-title {
        span {
            display: inline-block;
            width: 7px;
            height: 24px;
            background: #187bdb;
        }

        h2 {
            width: 120px;
            display: inline-block;
            font-size: 16px;
            padding-left: 10px;
            position: relative;

            &::before {
                content: "";
                position: absolute;
                left: 0;
                top: 0;
                width: 7px;
                height: 24px;
                background: #187bdb;
            }
        }
    }

    .basic-info-body {
        margin: 10px;
        color: #333;
        font-size: 13px;
        font-family: 'Arial Normal', 'Arial', sans-serif;
        font-weight: 400;
        border-left: 1px solid #eee;

        .basic-info-body-label {
            display: inline-block;
            width: 40%;
            height: 48px;
            line-height: 48px;
            background: #f5f6f7;
            text-align: right;
            padding-right: 10px;
            /*border-left: 1px solid #B6B7B7;*/
            /*border-top: 1px solid #B6B7B7;*/
            /*border-bottom: 1px solid #B6B7B7;*/
        }

        .basic-info-body-item {
            /*display: inline-block;*/
            /*width: 60%;*/
            /*height: 48px;*/
            /*line-height: 48px;*/
            /*text-align: left;*/
            padding: 0 10px;
            /*border-left: 1px solid #eee;*/
            /*border-right: 1px solid #eee;*/
            /*border-right: 1px solid #B6B7B7;*/
            /*border-top: 1px solid #B6B7B7;*/
            /*border-bottom: 1px solid #B6B7B7;*/
        }
    }
}

.preview {
    position: absolute;
    right: 10px;
    top: 0;
    width: 35px;
    height: 35px;
    background: #eee;

    .preview-img {
        width: 35px;
        height: 35px;
        overflow: hidden;
    }
}

/deep/ .ivu-form-item-content {
    margin-bottom: 0;
    margin-left: 5px !important;
}

/deep/ .ivu-form-item-label {
    margin-bottom: 0;
    padding: 15px 12px 10px 0 !important;
    background: #f5f6f7;
    text-align: right;
    border-right: 1px solid #eee;
}

/deep/ .ivu-form-item {
    display: flex;
    align-items: center;
    margin-bottom: 0;
    border-right: 1px solid #eee;
}

/deep/ .Input-wrapper {
    width: 90%;
    margin: 0 10px;

    .ivu-select-selection {
        height: 30px;
        border: none;
        box-shadow: none;
    }

    .ivu-input {
        border: none;
        box-shadow: none;
    }
}

.btn-wrapper {
    position: relative;

    .btn-action {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        top: 100px;
    }
}

.upload-wrapper {
    display: inline-block;
    position: relative;

    span {
        display: inline-block;
        width: 80px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        margin-bottom: -8px;
        line-height: 26px;
    }

    .upload-action {
        display: none;
        position: absolute;
        left: 0;
        right: 0;
        top: -1px;
        bottom: 0px;
        background: rgba(0, 0, 0, .6);

        i {
            cursor: pointer;
            margin: 0 10px;
        }
    }

    &:hover {
        .upload-action {
            display: inline-block;
        }
    }
}

/deep/ .ivu-upload {
    margin-bottom: -14px;
    display: inline-block;
}

.over-wrapper {
    width: 200px;
    height: 23px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/deep/ .ivu-select-selected-value {
    background: #ffffff;
    color: #333333;
}

/deep/ .ivu-input-disabled {
    background: #ffffff;
    color: #333333;
}

/deep/ .ivu-select-placeholder {
    background: #ffffff;
    color: #333333;
}

/deep/ .ivu-select-input {
    background: #fff;
    height: 30px;
}

.file-list {
    //width: 50%;
    margin: 0 20px;

    .item-src {
        display: inline-block;
        line-height: 26px;
        color: #187bdb;
        cursor: pointer;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .item-icon {
        width: 20%;
        display: inline-block;
        margin-top: 4px;
    }
}

.dwFileUrl {
    width: 100%;
    color: #187bdb;
    cursor: pointer;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

</style>
